﻿<html>
  <head>
    <title>Matrix Diagram</title>
    <script type="text/javascript" src="protovis-r3.2.js"></script>
    <script type="text/javascript" src="dependencies.js"></script>
    <style type="text/css">

#fig {
  width: 1500px;
  height: 1500px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var color = pv.Colors.category19().by(function(d) d.group);

var vis = new pv.Panel()
    .width(1500)
    .height(1500)
    .top(150)
    .left(150);

var layout = vis.add(pv.Layout.Matrix)
    .nodes(dependencies.nodes)
    .links(dependencies.links)
    .sort(function(a, b) b.nodeName < a.nodeName);

layout.link.add(pv.Bar)
    .fillStyle(function(l) l.linkValue
        ? ((l.targetNode.group == l.sourceNode.group)
        ? color(l.sourceNode) : "#555") : "#eee")
    .antialias(false)
    .lineWidth(1);

layout.label.add(pv.Label)
    .textStyle(color);

vis.render();

    </script>
  </div></div></body>
</html>